<template>
  <div class="form_wrap">
    <el-form ref="perForm" label-width="100px" :rules="rules" :model="personObj">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="personObj.username" />
      </el-form-item>
      <el-form-item label="工号">
        <el-input v-model="personObj.workNumber" disabled />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="personObj.mobile" :disabled="$route.params.id" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentId">
        <el-cascader v-model="personObj.departmentId" :options="departTree" :props="{value:'id',label:'name'}" />
      </el-form-item>
      <el-form-item label="聘用形式">
        <el-select v-model="personObj.formOfEmployment">
          <el-option v-for="item in formOfEmploymentArr" :key="item.id" :value="item.id" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker
          v-model="personObj.timeOfEntry"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="转正时间">
        <el-date-picker
          v-model="personObj.correctionTime"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="员工头像">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toAdd">保存更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDepartmentApi } from '@/api/social'
import { addUserApi, getUserInfo, updateEmployee } from '@/api/personnel'
import { toTree } from '@/utils/index'
export default {
  name: 'VueHrimPersonInfo',

  data() {
    return {
      formOfEmploymentArr: [
        { id: '1', label: '正式' },
        { id: '2', label: '非正式' }
      ],
      value: [],
      departTree: [], // 级联选择器需要的数据
      rules: {
        username: [{ required: true, message: '用户名必填', trigger: 'blur' }],
        mobile: [
          { required: true, message: '手机号必填', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9]\d{9}$/, message: '手机号格式有误', trigger: 'blur'
          }
        ],
        departmentId: [{ required: true, message: '部门必选', trigger: 'blur' }]
      },
      imageUrl: '', // 头像
      personObj: {
        correctionTime: '', // 转正时间
        timeOfEntry: '', // 入职时间
        departmentId: '', //  部门id 通过级联选择器 获取到数据
        formOfEmployment: '', // 聘用形式
        mobile: '', // 手机号
        username: '', // 用户名

        workNumber: '', // 工号默认传空
        staffPhoto: '' // 头像默认传空
      }
    }
  },

  mounted() {

  },
  created() {
    this.getDepart()
    // 如果地址栏目有id 调用  如果没有不调用
    if (this.$route.params.id) {
      this.getUser(this.$route.params.id)
    }
  },
  methods: {
    async getUser(id) { // 获取员工详情
      const res = await getUserInfo(id)
      console.log(res, '888888888888888')

      this.personObj = res// 获取的员工详情 做回显
      this.personObj.formOfEmployment = res.formOfEmployment === 1 ? '正式' : '非正式'
      this.imageUrl = res.staffPhoto // 头像

      // this.personObj.departmentId = res.departmentId // res.departmentId  11
      let arr = []
      this.departTree[0].children.forEach(item => {
        item.children.forEach(zitem => {
          if (zitem.id === res.departmentId) {
            arr = [1, zitem.pid, res.departmentId]
          }
        })
      })
      console.log(arr, '44444444444444444444')
      this.personObj.departmentId = arr
      // 获取当前的父级id
    },
    async toAdd() { // 添加员工接口
      // this.personObj.formOfEmployment = this.personObj.formOfEmployment === '正式' ? 1 : 0
      console.log(this.personObj.departmentId)
      if (typeof this.personObj.departmentId === 'object') {
        this.personObj.departmentId = this.personObj.departmentId.pop() // [1,4,10]
      }

      console.log(this.personObj.departmentId, '33333333333333333')
      const dataStr = new Date(this.personObj.timeOfEntry).toLocaleDateString()
      this.personObj.timeOfEntry = dataStr.split('/').join('-')

      this.$refs.perForm.validate(async(vali) => {
        if (vali) {
          if (this.$route.params.id) { // 如果有id 编辑接口
            const editRes = await updateEmployee(this.personObj)
            console.log(editRes, '$$$$$$$$$$$$$$$$$$$')
            this.$message.success('编辑人员成功')
          } else { // 添加接口
            const res = await addUserApi(this.personObj)
            console.log(res, '-------------------')
            this.$message.success('添加人员成功')
          }
          this.$router.push('/personnel/personnel')
        }
      })
    },
    async getDepart() { // 获取部门列表数据 渲染到级联选择器
      const res = await getDepartmentApi()

      this.departTree = toTree(res)
      console.log(this.departTree, '6666666666666')
    }
  }
}
</script>
<style lang="scss" scoped>
  .form_wrap{
    width: 100%;
    padding: 80px 0 50px 200px;
    box-sizing: border-box;
    .el-form{
      width: 600px;

    }
  }
   .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    border: 1px solid black;
  }
  .avatar-uploader .el-upload ::v-deep .el-upload--text{
     border: 1px solid black;
  }
</style>
